<template>
  <n-flex class="height" justify="space-between" :align="'center'" style="height: 55px;">
    <n-flex>
      <h3>Gitlab 代码统计工具</h3>
    </n-flex>
    <n-flex :align="'center'" justify="center">
      <n-dropdown trigger="hover" :options="options" @select="handlerDropdownSelect">
        <n-avatar
          :size="36"
          round
          :src="currentUser?.avatar_url"
        ></n-avatar>
      </n-dropdown>
      <!-- <div>{{ currentUser?.name || currentUser?.username || currentUser?.email }}</div> -->

    </n-flex>
  </n-flex>
</template>



<script setup lang="ts">
import { useConfigStore } from '@/store/config';
import type { DropdownOption } from 'naive-ui'
import { DropdownTitle } from './Header.tsx'
import { useRouter } from 'vue-router';

const configStore = useConfigStore();
const { currentUser } = toRefs(configStore);
const router = useRouter();

const options: Ref<DropdownOption[]> = ref([
  {
    key: 'title',
    type: 'render',
    render: () => DropdownTitle(currentUser.value)
  },
  {
    key: 'title-divider',
    type: 'divider'
  },
  {
    label: '退出',
    key: 'exit'
  },
])

const handlerDropdownSelect = (key: string) => {
  if (key === 'exit') {
    configStore.logout()
    router.push('/login')
  }
}

</script>


<style scoped lang="css">


</style>
